﻿<!doctype html>
<html>
<head>
    <title>SpreadJS - Theme</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <link href="../../../external/spreadjs/css/gcspread.sheets.excel2013white.9.40.20161.0.css" rel="stylesheet" type="text/css" />

    <script src="../../../external/external/jquery-1.8.2.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="../../../external/spreadjs/gcspread.sheets.all.9.40.20161.0.min.js"></script>

    <style type="text/css">
    /* set body.margin to avoid change when apply bootstrap theme */ 
    /*css_begin*/
        body {
            margin: 8px !important;     
        }
    /*css_end*/
    </style>

    <script id="scriptInit" type="text/javascript">
        /*code_begin*/
        var spreadNS = GcSpread.Sheets;
        $(document).ready(function () {
            function addThemeLink(href) {
                $("head").append($("<link rel=\"stylesheet\" type=\"text/css\" name=\"externalTheme\" "
                    + " href=\"" + href + "\" " + "/>"));
            }

            $("#themes").change(function () {
                var href = $(this).val(),
                    $themeLinks = $("link[name='externalTheme']");

                $themeLinks.remove();

                if (href) {
                    href.split("&&").forEach(function (item) {
                        addThemeLink(item);
                    });
                }

                // wait for loading css
                setTimeout(function () {
                    spread.refresh();
                }, 500);
            });

            var spread = new GcSpread.Sheets.Spread(document.getElementById("ss"), { sheetCount: 1 });

            var sheet = spread.getActiveSheet();
            sheet.setSelection(2, 2, 3, 4);

            $("#themes").change();
        });
        /*code_end*/
    </script>
</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width: 100%; height: 320px; border: 1px solid gray;"></div>
        <div class="demo-options">
            <div class="option-row">
                <label>Use Theme:</label>
                <select id="themes">
                    <optgroup label="SpreadJS">
                        <option value="">SpreadJS</option>
                    </optgroup>
                    <optgroup label="Bootstrap">
                        <option value="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css&&https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">Bootstrap 3.3.4</option>
                    </optgroup>
                    <optgroup label="jQuery UI">
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/black-tie/jquery-ui.css">Black Tie</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/blitzer/jquery-ui.css">Blitzer</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/cupertino/jquery-ui.css">Cupertino</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dark-hive/jquery-ui.css">Dark Hive</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/dot-luv/jquery-ui.css">Dot Luv</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/eggplant/jquery-ui.css">Eggplant</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/excite-bike/jquery-ui.css">Excite Bike</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/flick/jquery-ui.css">Flick</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/hot-sneaks/jquery-ui.css">Hot Sneaks</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">Humanity</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/le-frog/jquery-ui.css">Le Frog</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/mint-choc/jquery-ui.css">Mint Chocolate</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/overcast/jquery-ui.css">overcast</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/pepper-grinder/jquery-ui.css">Pepper Grinder</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/redmond/jquery-ui.css">Redmond</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/smoothness/jquery-ui.css">Smoothness</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/south-street/jquery-ui.css">South Street</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/start/jquery-ui.css">Start</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/sunny/jquery-ui.css" selected="selected">Sunny</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/swanky-purse/jquery-ui.css">Swanky Purse</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/trontastic/jquery-ui.css">Trontastic</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-darkness/jquery-ui.css">UI Darkness</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css">UI Lightness</option>
                        <option value="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/vader/jquery-ui.css">Vader</option>
                    </optgroup>
                </select>
            </div>
        </div>
    </div>
</body>
</html>
